<template>
	<div class="goods-wrap df">
		<div class="navs">
			<van-sidebar v-model="activeKey">
				<van-sidebar-item
					@click="handleChange"
					v-for="item in navList"
					:key="item"
					:title="item"
				/>
			</van-sidebar>
		</div>
		<div class="goods-rt">
			<div>
				<div
					v-for="(v, i) in goodsList"
					:key="i + 1"
					:id="i"
					class="goods-item"
				>
					<p class="right-cate">{{ v.name }}</p>
					<van-card
						v-for="(item, index) in v.foods"
						@click="handleDetail(item)"
						:key="index"
						:price="item.price"
						:desc="item.goodsDesc"
						:title="item.name"
						:thumb="item.imgUrl"
						:origin-price="item.sellCount"
					>
					<!-- @plus="plusNum" @minus="minusNum" -->
						<template #footer>
							<van-stepper v-model="item.count" min="0"
							theme="round" button-size="22" disable-input default-value="0"
							@plus="plusNum" @minus="minusNum"/>
						</template>
					</van-card>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters, mapState } from "vuex";
	import BScroll from "better-scroll";
	export default {
		data() {
			return {
				activeKey: 0,
				heightList: [],
				loading: false,
			};
		},

		computed: {
			...mapGetters("shop", ["navList"]),
			...mapState("shop", ["goodsList"]),
		},
		async created() {
			await this.$store.dispatch("shop/$_getGoodsList");

			//加定时器是为了解决，刷新页面后，异步数据，dom内容没有及时撑开，点击屏幕滑动不了，需要切换组件之后才能正常滑动
			this.getScroll();
		},
		methods: {
			plusNum() {
				event.stopPropagation(); // 阻止事件冒泡
			},
			minusNum() {
				event.stopPropagation(); // 阻止事件冒泡
			},
			handleChange(index) {
				// 点击左侧菜单
				this.activeKey = index;
				//设定一个loading值 左侧点击后，右侧停止监听滚动事件
				this.loading = true;
				// console.log("lt-index", index);
				// 获取右边商品列表节点
				let goodNodes = document.querySelectorAll(".goods-item");
				// 右侧滚动
				this.bs2.scrollToElement(goodNodes[this.activeKey], 600);
			},

			getScroll() {
				setTimeout(() => {
					this.$nextTick(() => {
						this.bs1 = new BScroll(".navs", {
							click: true,
							probeType: 3, //屏幕滑动的过程中
						});
						this.bs2 = new BScroll(".goods-rt", {
							click: true,
							probeType: 3, //屏幕滑动的过程中和在 momentum 滚动动画运行过程中实时派发 scroll 事件
						});
						let goodNodes =
							document.querySelectorAll(".goods-item");
						// 获取所有good-item盒子的高度装进数组
						goodNodes.forEach((el) => {
							// 得到每个盒子的高度
							this.heightList.push(el.clientHeight);
						});
						// console.log(this.heightList);
						// 监听右侧滚动事件
						this.bs2.on("scroll", ({ y }) => {
							// 点击左侧，右侧直接停止监听
							if (this.loading) return;
							let Y = Math.abs(y);
							// console.log(Y);

							/* 
              索引0  y>0 && y<1盒子
              索引1  y>1盒子 && y<1+2 盒子
              索引2  y>1+2盒子 && y<1+2+3 盒子
              大于前面盒子的和<前面盒子的和+自己高度
            */
							this.heightList.reduce((total, cur, index) => {
								if (Y > total && Y < total + cur) {
									// 拿到索引赋值
									this.activeKey = index;
								}
								return total + cur;
							});
						});
						// 监听右侧滚动结束后，把loading值设置为false,右侧即可正常监听滚动事件
						this.bs2.on("scrollEnd", () => {
							this.loading = false;
						});
					});
				}, 1000);
			},
			// 跳转商品详情
			handleDetail(foods) {
				this.$router.push({
					name: "detail",
					params: foods,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.goods-wrap {
		height: 100%;
		.goods-rt {
			width: 100%;
		}
		.right-cate {
			height: 30px;
			background-color: #f4f4f4;
			line-height: 30px;
			padding: 0 10px;
			color: #333;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				height: 30px;
				width: 3px;
				background-color: #dcdcdc;
			}
		}
	}
</style>
